<template>
  <div class="item-wrapper">
    <div v-if="cardData.data.length" class="card-item">
      <card
        v-for="item in cardData.data"
        :id="item.id"
        :key="item.id"
        :favorite="item.favorite"
        :url="item.image"
        :create-date="item.createDate"
        :user-info="{
          name: item.user.name,
          avatar: item.user.avatar,
        }"
        :title="item.title"
      ></card>
    </div>

    <el-empty v-else description="没有查到"></el-empty>
  </div>
  <div class="pagination">
    <el-pagination
      v-model:page-size="searchTerms.pageSize"
      v-model:current-page="searchTerms.pageIndex"
      :total="cardData.count"
    ></el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { inject, reactive, watch } from 'vue';
import card from '@components/card/card.vue';
import { useApi } from '@core/http/api-instance';
import { GetNoteListRes } from '@core/http/apis/note/models/GetNoteListRes';
import { NavProvideType, NAV_PROVIDE_KEY } from '@pages/fragments/nav';
import { useRouter } from 'vue-router';
const provideObj = inject<NavProvideType>(NAV_PROVIDE_KEY);

const router = useRouter();

const searchTerms = reactive({
  term: '',
  pageIndex: 1,
  pageSize: 10,
});
const api = useApi();
const cardData = reactive<{
  data: GetNoteListRes[];
  count: number;
}>({
  data: [],
  count: 0,
});
//网站搜索
// func
// 获得 note信息
const getData = async () => {
  try {
    const resData = await api.note.getNoteList(
      searchTerms.pageIndex,
      searchTerms.pageSize,
      searchTerms.term,
      provideObj.title.value,
    );
    cardData.data = resData.data;
    cardData.count = resData.count;
  } catch (e) {
    console.warn(e instanceof Error && e.message);
  }
};

// watch
watch([() => searchTerms.pageIndex, () => searchTerms.pageSize], getData);

provideObj.toSearch = () => {
  cardData.data = [];
  cardData.count = 0;
  searchTerms.pageIndex = 1;
  searchTerms.pageSize = 10;
  router.push('/all');
  getData();
};

getData();
</script>

<style lang="scss" scoped>
@import '@assets/css/basic-page.scss';

.pagination {
  margin-top: 20px;
  padding: 0 200px;
}
</style>
